// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,Button,Popconfirm, Modal, Row, Col, Input, Select, Cascader, Icon, Checkbox, Tabs, DatePicker, message } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './customerInfoStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import moment from 'moment';

const FormItem = Form.Item
const { RangePicker } = DatePicker
const { TabPane } = Tabs;
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const customerInfoView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  let { timeList,detail, actionType, btnLoading } = modelObj

  const formItemLayoutPro = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };
  const formItemLayoutForTime = {
    labelCol: { span: 2 },
    wrapperCol: { span: 20 },
  };

  function callback(key) {
    console.log(key);
  }

  function goback(){
    hashHistory.push({
      pathname: '/home/expandManage/customerList',
      query: {}
    });
  }
  // //输入框改变时
  // function inputChange(e, name) {
  //   dispatch({
  //     type: `${namespace}/updateStore`,
  //     payload: {
  //       query: {
  //         ...query,
  //         [name]: e,
  //       }
  //     }
  //   })
  // }

  return (
    <div className='public_listMain'>
      <div className={"functionButton"}>
          <Button onClick={() => goback()}>关闭</Button>
      </div>

      <CollapsiblePanels title="客户详情" hideUpDownBtn={true} >
        <Row>
          <Col span={12}>
            <FormItem label='区域'  {...formItemLayoutPro}>
              {getFieldDecorator('areaName', {
                rules: [{
                  required: false, whitespace: true, message: '请选择区域'
                }],
                initialValue: detail.areaName
              })(
              <span>{detail.areaName}</span>
              )}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label='项目'  {...formItemLayoutPro}>
              {getFieldDecorator('projectName', {
                rules: [{
                  required: false, whitespace: true, message: '请选择项目'
                }],
                initialValue: detail.projectName
              })(
              <span>{detail.projectName}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label='所属团队'  {...formItemLayoutPro}>
              {getFieldDecorator('teamName', {
                rules: [{
                  required: false, whitespace: true, message: '请选择所属团队'
                }],
                initialValue: detail.teamName
              })(
                <span>{detail.teamName}</span>
              )}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label='报备人'  {...formItemLayoutPro}>
              {getFieldDecorator('brokerName', {
                rules: [{
                  required: false, whitespace: true, message: '请选择报备人'
                }],
                initialValue: detail.brokerName
              })(
                <span>{detail.brokerName}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label='提交人'  {...formItemLayoutPro}>
              {getFieldDecorator('creater', {
                rules: [{
                  required: false, whitespace: true, message: '请选择提交人'
                }],
                initialValue: detail.creater
              })(
                <span>{detail.creater}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <div>
        <Tabs defaultActiveKey="1" onChange={callback} animated={false}>
          <TabPane tab="客户基本信息" key="1">
          <Row>
            <Col span={12}>
              <FormItem label='客户姓名'  {...formItemLayoutPro}>
                {getFieldDecorator('clientName', {
                  rules: [{
                    required: false, whitespace: true, message: '请选择报备人'
                  }],
                  initialValue: detail.clientName
                })(
                  <span>{detail.clientName}</span>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label='手机号'  {...formItemLayoutPro}>
                {getFieldDecorator('clientPhones', {
                  rules: [{
                    required: false, whitespace: true, message: '请输入手机号'
                  }],
                  initialValue: detail.clientPhones
                })(
                  <span>{detail.clientPhones}</span>
                )}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem label='性别'  {...formItemLayoutPro}>
                {getFieldDecorator('gender', {
                  rules: [{
                    required: false, whitespace: true, message: '请选择性别'
                  }],
                  initialValue: detail.gender
                })(
                  <span>{detail.gender}</span>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label='意向等级'  {...formItemLayoutPro}>
                {getFieldDecorator('intentionLevel', {
                  rules: [{
                    required: false, whitespace: true, message: '请选择意向等级'
                  }],
                  initialValue: detail.intentionLevel
                })(
                  <span>{detail.intentionLevel}</span>
                )}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem label='报备时间'  {...formItemLayoutPro}>
                {getFieldDecorator('reportTime', {
                  rules: [{
                    required: false, whitespace: true, message: '请选择报备人'
                  }],
                  initialValue: detail.reportTime
                })(
                  <span>{detail.reportTime}</span>
                )}
              </FormItem>
            </Col>
          </Row>
          </TabPane>
          <TabPane tab="时间轴" key="2">
              {timeList.map((item,key)=>{
                return   <div key={key} style={{padding: '0 50px',lineHeight: '40px',borderDottom: '1px dashed  #f2f2f2'}}>
                          <span style={{marginRight:'30px'}}>{item.time}</span>
                          <span>{item.action}</span>
                        </div>
              })}
              {/* <div style={{padding: '0 50px'}}>
                <span style={{marginRight:'30px'}}>2020-03-15</span>
                <span>haha </span>
              </div> */}
          </TabPane>
        </Tabs>
        </div>
      </CollapsiblePanels>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(customerInfoView))